<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="light" class="pub-hearder">
        <ion-buttons slot="start">
          <ion-back-button text=""></ion-back-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content>
        <div class="main-page">
            <ion-row class="info">
                <ion-col size="3" class="imgbox">
                    <img :src="url" alt="" class="tx">
                </ion-col>
                <ion-col>
                    <div class="name">张怼怼</div>
                    <div class="zw">小三门资深讲师</div>
                </ion-col>
            </ion-row>
            <div class="title">教师简介</div>
            <div class="con">同学们觉得还有什么问题听不明白的话，可以反复观看，跟我微信一对一沟通同学们觉得还有什么问题听不明白的话，可以反复观看，跟我微信一对一沟通同学们觉得还有什么问题听不明白的话，可以反复观看，跟我微信一对一沟通同学们觉得还有什么问题听不明白的话，可以反复观看，跟我微信一对一沟通</div>
            <div class="title">课程推荐</div>
            <div class="grad">
                <ion-list  lines="none"> 
                    <ion-item v-for="(item, index) in fileList" :key="index" @click="goDownPage($event, item)">
                        <ion-avatar slot="start" class="avatar">
                            <img class="avatar" src="@/assets/images/filedown.png">
                        </ion-avatar>
                        <ion-label>
                            <p class="filename">{{ item.title }}</p>
                            <span>张老师 I 第九讲</span>
                        </ion-label>
                    </ion-item>
                </ion-list>
            </div>
        </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton } from '@ionic/vue';
import { personOutline, lockClosedOutline } from 'ionicons/icons';
import { reactive, toRefs } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { PublicService } from '@/utils/public';
const publicService = new PublicService();
export default {
  name: 'login-page',
  components: {
    IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    let t: any;
    const state = reactive({
        url: route.query.url,
        fileList: [
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 1
            },
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 0
            },
            {
                title: '考音乐学院到底要不要跑课',
                size: 10,
                downNum: 2222,
                isMian: 1
            }
        ],
    })

   


    return {
      ...toRefs(state)
    }
  }
}
</script>
<style lang="scss" scoped>
ion-content{
    --background: #f4f4f4 !important;
    --padding-top: 30px;
}
.main-page {
    width: 96%;
    margin: 0px auto;
    padding: 10px;
    background: #fff;
    border-radius: 10px 10px 0 0;
    height: 100%;
    .info{
        position: relative;
        top: -10px;
        .name{
            font-size: 18px;
            color: #222222;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .zw{
            font-size: 10px;
            color: #999C9F;
        }
    }
    .imgbox{
        text-align: right;
    }
    .tx{
        width: 70px;
        height: 70px;
        position: relative;
        border-radius: 50%;
        top: -13px;
    }
    .title{
        font-size: 14px;
        color: #1E1E1F;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .con{
        font-size: 14px;
        color: #5E6266;
        margin-bottom: 10px;
    }
}

.grad{
    ion-icon{
        position: relative;
        top: 2px;
        
    }
    ion-item{
        margin-bottom: 20px;
    }
    .desc{
        font-size: 13px;
        color: #5E6266;
        overflow: hidden;  //超出隐藏
        text-overflow: ellipsis; //文本超出时显示省略号
        white-space: nowrap; //设置文本不换行
    }
    .filename{
        font-weight: bold;
        font-size: 16px;
        color: #1E1E1F;
        margin-bottom: 0px;
        margin-top: 0px;
    }
    span{
        font-size: 12px;
        color: #939699;
    }
    label{
        font-size: 12px;
        color: #fff;
        background: #CA3032;
        padding: 3px 5px;
        margin-right: 5px;
        border-radius: 3px;
    }
}
</style>